<template>
	<view>
		<video :id="id" style="width: 100%;" @timeupdate="playerprogresslisten" @loadedmetadata="ifcanplay" :src="src"></video>
		<view class="progresswrap">
			<view style="position: relative;">
				<view class="progressbar" :id="id+'_progressbar'" @touchstart="playerprogress_set_start" @touchmove="playerprogress_set_moving" @touchend="playerprogress_set_end" :style="{left:current}"></view>
				<view class="progressline" :id="id+'_progressline'"></view>
			</view>
		</view>
		<button class="playerbtn" v-if="!playerbtnshow" type="default" @click="playerplay()">播放</button>
		<button class="playerbtn" v-if="playerbtnshow" type="default" @click="playerstop()">暂停</button>
	</view>
</template>

<script>
	export default {
		props:{
			id:{
				type:null,
				default:'default_id'
			},
			src:{
				type:null,
				default:''
			}
		},
		data(){
			return {
				current:0,
				playerbtnshow:0,//1是暂停，0是播放
				lastposi:0,//初始位置
				sx:0,
				canplay:0,
				alltime:0,
			}
		},
		methods:{
			ifcanplay:function(e){
				if(this.canplay == 0){
					this.canplay = 1
					this.alltime = e.detail.duration
				}
			},
			//控制player播放
			playerplay:function(){
				uni.createVideoContext(this.id).play()
				this.playerbtnshow = 1
			},
			//控制player暂停
			playerstop:function(){
				uni.createVideoContext(this.id).pause()
				this.playerbtnshow = 0
			},
			//player进度监控
			playerprogresslisten:function(e){
				var alltime = Math.floor(e.detail.duration)
				var currentTime = Math.floor(e.detail.currentTime)
				var $ = uni.createSelectorQuery().in(this)
				$.select('#'+this.id+'_progressline').boundingClientRect((ele)=>{
					//获取进度条总宽度
					var allwidth = ele.width / uni.getSystemInfoSync().windowWidth * 750 // rpx为单位基础
					//移动距离
					var currentposi = currentTime / alltime * allwidth // rpx为单位基础
					//将移动距离转成百分比
					this.current = Math.floor(currentposi / allwidth * 100) + '%'
				}).exec()
			},
			//player操作进度
			playerprogress_set_start:function(e){
				if(this.canplay == 0) return;
				/* 先记录拖动块的初始位置，因为最后是translate调整的位置，所有有误差，要减去宽度的1/2 */
				var $ = uni.createSelectorQuery().in(this)
				$.select('#'+this.id+'_progressbar').boundingClientRect((ele)=>{
					this.lastposi = ele.left - (ele.width / 2)
				}).exec()
				/* 点击开始的坐标 */
				this.sx = e.touches[0].pageX
				this.playerstop()
			},
			playerprogress_set_moving:function(e){
				if(this.canplay == 0) return;
				/* 指针移动减去开始的等于要加还是要减 */
				var lastx = e.touches[0].pageX - this.sx
				/* 判断是否小于0是否大于宽度 */
				var $ = uni.createSelectorQuery().in(this)
				$.select('#'+this.id+'_progressline').boundingClientRect((ele)=>{
					this.progressleft = ele.left // 重新记录左边的距离
					var temp = 0
					if(this.lastposi + lastx<0){
						temp = 0
					}else{
						if(this.lastposi + lastx>ele.width){
							temp = ele.width
						}else{
							temp = this.lastposi + lastx
						}
					}
					this.current = temp + 'px'
					//事先保存一个percent
					//获取总宽度
					var allwidth = ele.width / uni.getSystemInfoSync().windowWidth * 750 // rpx为单位基础
					//处理拖动块单位为rpx
					var handle = temp / uni.getSystemInfoSync().windowWidth * 750
					//定位之后的时间
					var lastcurrent = handle / allwidth * this.alltime
					//设置时间
					uni.createVideoContext(this.id).seek(lastcurrent)
				}).exec()
			},
			playerprogress_set_end:function(){
				if(this.canplay == 0) return;
				//转成百分比
				var $ = uni.createSelectorQuery().in(this)
				$.select('#'+this.id+'_progressline').boundingClientRect((ele)=>{
					//获取进度条总宽度
					var allwidth = ele.width / uni.getSystemInfoSync().windowWidth * 750 // rpx为单位基础
					//处理拖动块单位为rpx
					var handle = (Number(this.current.split('px')[0]) / uni.getSystemInfoSync().windowWidth * 750)
					//转成百分比
					this.current = Math.floor(handle/allwidth * 100) + '%'
				}).exec()
			},
		},
		mounted(){
			/* 一开始先记录进度条的左边距离 */
			var $ = uni.createSelectorQuery().in(this)
			$.select('#'+this.id+'_progressline').boundingClientRect((ele)=>{
				this.progressleft = ele.left
			}).exec()
		}
	}
</script>

<style scoped>
	.progresswrap {
		padding: 30rpx 0;
	}
	.progressbar {
		position: absolute;
		top: -14rpx;
		left: 0rpx;
		width: 34rpx;
		height: 34rpx;
		transform: translateX(-50%);
		border-radius: 50%;
		background-color: #ddd;
	}
	.progressline {
		padding: 2rpx 0;
		background-color: #ccc;
	}
	.playerbtn {
		display: inline-block;
		padding: 0;
		width: 120rpx;
	}
</style>
